const codesandbox = require('remark-codesandbox');
module.exports = {
  "stories": [
    "../src/introduce/*.stories.mdx",
    "../src/stories/**/*.stories.@(js|jsx|ts|tsx|mdx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/addon-docs",
    "@storybook/addon-a11y"
  ],
  "framework": "@storybook/react",
  core: {
    builder: 'webpack5'
  },
  webpackFinal: (config) => {
    const mdxRule = config.module.rules.find((rule) =>
      rule.test?.toString() === '/\\.mdx$/'
    );
    const {
      options: { remarkPlugins }
    } = mdxRule.use.find(
      // ({ loader }) => loader === require.resolve('@storybook/mdx1-csf/loader')
      ({ loader }) => loader === require.resolve('@mdx-js/loader')
    );
    remarkPlugins.push([codesandbox, { mode: 'button' }]);
    return config;
  }
}